<template>
    <div class="view">
        <Button type="primary" @click="ShowDialog">显示弹出框</Button>
        <DDModal v-model="show" title="复合式业务逻辑">
            <BusinessView slot="content" ref="BusinessView" />
            <div slot="footer">
                <Button @click="show = false">取消</Button>
                <Button type="primary" @click="save">保存</Button>
            </div>
        </DDModal>
        <div class="ViewTitle">合并数据结果</div>
        <code>
            <pre>{{ this.MergeDatas }}</pre>
        </code>
    </div>
</template>

<script>
import BusinessView from './businessView.vue'

export default {
    components: {
        BusinessView
    },
    data() {
        return {
            show: false,
            ConfigDatas: '',
            MergeDatas: ''
        }
    },
    methods: {
        ShowDialog() {
            // 显示弹窗
            this.show = true
        },
        async save() {
            // 关闭弹窗，清空数据，显示结果
            var MergeDatas = await this.$store.dispatch('7-Combine/GetValueByMerge')
            this.MergeDatas = JSON.stringify(MergeDatas, '4', '    ');
            this.show = false;
            this.$store.commit('7-Combine/Clear')
        }
    }
}
</script>s
<style lang="less" scoped>
.ViewTitle {
    padding: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc;
}
</style>
